<template>
    <div class="contain">
        <div class="title">实名认证</div>
        <a-alert message="为了保障您的合法权益，请尽快完成实名认证。注：实名认证一旦提交将不能再修改" type="info" show-icon />
        <div class="content">
            <a-form-model v-show="isChecked == false" ref="form" :model="form" :rules="rules"
                          :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item label="姓名" prop="name" >
                    <a-input v-model="form.name" placeholder="请输入姓名" />
                </a-form-model-item>
                <a-form-model-item label="身份证" prop="idcardno">
                    <a-input v-model="form.idcardno" placeholder="请输入身份证"/>
                </a-form-model-item>
                <a-form-model-item label="身份证有效期开始" >
<!--                    <a-input v-model="form.sttime" placeholder="开始"/>-->
                    <a-date-picker placeholder="开始时间" @change="startDateChange" :format="dateFormat"/>
                    <a-date-picker placeholder="失效时间" @change="endDateChange" :format="dateFormat"/>
                </a-form-model-item>
                <a-form-model-item style="display: flex;justify-content: center;">
                    <a-button type="primary" html-type="submit" @click="onSubmit">
                        提交
                    </a-button>
                </a-form-model-item>
            </a-form-model>
        </div>
    </div>
</template>

<script>
export default {
    name: 'realnameCheck',
    data() {
        return {
            isChecked: false,
            dateFormat:'YYYYMMDD',
            labelCol: {span: 8},
            wrapperCol: {span: 5},
            form: {
                idcardno: '',
                name: '',
                sttime:'',
                edtime:''
            },
            rules: {
                name: [{
                    required: true, message: '请输入姓名', trigger: 'change'
                }],
                idcardno: [{
                    required: true, message: '请输入身份证号', trigger: 'change'
                }]
            }
        }
    },
    mounted() {
        this.onLoadCheck()
        console.log(this.rules)
    },
    methods: {
        onSubmit() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    this.$api.ajaxData({
                        pathName: 'doSmdj',
                        method: 'POST',
                        authorization: true,
                        data: Object.assign(this.form)
                    }).then(() => {
                        this.$notification.open({
                            message: '信息提示',
                            description: '实名认证成功！'
                        });
                    })
                }
            })
        },
        onLoadCheck() {
            //读取用户数据
            this.$api.ajaxData({
                pathName: 'doCheckSm',
                authorization: true,
                errorFunc: false
            }).then(res => {
                if (res.success) {
                    this.isChecked = true
                }
            })
        },
        //时间选择器 开始日期
        startDateChange(date, dateString){
            this.form.sttime=dateString
        },
        //时间选择器 结束日期
        endDateChange(date, dateString){
            this.form.edtime=dateString
        }
    }
}

</script>

<style scoped lang="scss">
.contain {
    padding: 0 20px;
    border: 1px solid #f7f7f7;
    background: #fff;

    .title {
        height: 50px;
        line-height: 50px;
        font-size: 14px;
        font-weight: bold;
        color: #333;
        border-bottom: 1px solid #f7f7f7;
    }

    .content {
        padding: 40px 0 20px 20px;

        .address-box {
            li {
                position: relative;
                float: left;
                width: calc(33.33% - 20px);
                padding: 15px 10px;
                margin-bottom: 20px;
                margin-right: 20px;
                height: 180px;
                font-size: 13px;
                color: #333333;
                border: 1px solid #e4e4e4;
                box-sizing: border-box;

                &.address {
                    .default-tag {
                        position: absolute;
                        top: 3px;
                        right: 0;
                        height: 30px;
                        line-height: 30px;
                        padding: 0 20px;
                        border-radius: 2px;
                        font-size: 12px;
                        color: #FFFFFF;
                        background: #ff8080;
                    }

                    .form {
                        display: flex;
                        align-items: flex-start;
                        margin-bottom: 10px;

                        &:nth-child(4) {
                            height: 40px;
                        }

                        .label {
                            flex-shrink: 0;
                            width: 70px;
                        }

                        .value {
                            @include ellipsis-line;
                        }
                    }

                    .option {
                        .option-btn {
                            float: left;
                            width: 70px;
                            height: 30px;
                            line-height: 30px;
                            margin-right: 10px;
                            color: #999;
                            border: 1px solid #e4e4e4;
                            border-radius: 3px;
                            text-align: center;
                            cursor: pointer;
                        }

                        &:after {
                            content: '';
                            display: block;
                            clear: both;
                        }
                    }

                    &:before {
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 3px;
                        background: linear-gradient(to right, #ff8080 0, #ff8080 30px, #fff 30px, #fff 40px, #6699ff 40px, #6699ff 70px, #fff 70px, #fff 80px) repeat-x;
                        background-size: 80px 100%;
                    }

                    &:after {
                        content: '';
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        display: block;
                        width: 100%;
                        height: 3px;
                        background: linear-gradient(to right, #ff8080 0, #ff8080 30px, #fff 30px, #fff 40px, #6699ff 40px, #6699ff 70px, #fff 70px, #fff 80px) repeat-x;
                        background-size: 80px 100%;
                    }
                }

                &.add-box {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    border: 1px dashed #e4e4e4;
                    text-align: center;
                    cursor: pointer;

                    span {
                        font-size: 20px;
                        color: #666666;
                        line-height: 28px;
                    }
                }

                &:nth-child(3n) {
                    margin-right: 0;
                }
            }

        }

        &:after {
            content: '';
            display: block;
            clear: both;
        }
    }
}
</style>
